import { PureComponent } from 'react';
import PropTypes from 'prop-types';

/**
 * 间隔画布背景（类似Fireworks空白画布背景）
 * row = 16
 * col = 16
 * size = 10
 * width = 256
 * height = 256
 */
class Spacer extends PureComponent {

  static propTypes = {
    row: PropTypes.number,
    col: PropTypes.number,
    size: PropTypes.number,
    width: PropTypes.number,
    height: PropTypes.number,
  };

  static defaultProps = {
    row: 16,
    col: 16,
    size: 10,
    width: 256,
    height: 256,
  };

  componentDidMount() {
    const { canvas } = this.refs;
    const { size, row, col } = this.props;
    let newSize = size + 4;
    if (canvas.getContext) {
      const ctx = canvas.getContext('2d');
      for (let i = 0; i < row; i++) {
        for (let n = 0; n < col; n++) {
          let x = i * newSize;
          let y = n * newSize;
          let color;
          // if (i % 2) {
          //   color = !(n % 2) ? '#aaa' : '#fff';
          // } else {
          //   color = n % 2 ? '#aaa' : '#fff';
          // }
          this.drawSpacer(ctx, x, y, size, color);
        }
      }
    }
  }
  drawSpacer(ctx, x = 0, y = 0, size, color = '#DFDFDF') {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, size, size);
  }

  render() {
    const props = {
      style: this.props.style,
      className: this.props.className,
      width: this.props.width,
      height: this.props.height,
    };
    return (
      <canvas ref="canvas" {...props}/>
    );
  }
}
export default Spacer;
